<link href="../../plugins/coreui/coreui.css" rel="stylesheet" />
<link href="../../css/admin.css" rel="stylesheet" />
<link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css" type="text/css">
<div class="box">
	<div>
		<form>
			<input type="hidden" id="id" name="id" value="${model.id}" />
			<div class="col-m-12">
				<label for="name" class="col-m-3 text-right">名称：</label>
				<div class="col-m-9">
					<input type="text" id="name" name="name" class="form-input" value="${model.name}" />
				</div>
			</div>
			<div class="col-m-12">
				<label for="code" class="col-m-3 text-right">角色代码：</label>
				<div class="col-m-9">
						<input type="text" id="code" name="code" class="form-input" value="${model.code}" />
					</div>
			</div>
			<div class="col-m-12">
				<label for="status" class="col-m-3 text-right">状态：</label>
				<div class="col-m-9">
					<select id="status" name="status" class="form-select">
						<option ${model.status==1?"selected='selected'":""} value="1">启用</option>
						<option ${model.status==0?"selected='selected'":""} value="0">隐藏</option>
					</select>
				</div>
			</div>
			<div class="col-m-12">
				<label for="parent_id" class="col-m-3 text-right">权限：</label>
				<div class="col-m-9">
					<input type="hidden" id="menuIds" name="menuIds" value="" />
					<input type="hidden" id="btnIds" name="btnIds" value="" />
					<div id="menuContent" class="menuContent" style=" position: absolute;">
						<ul id="treeDemo" class="ztree"></ul>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript" src="../../plugins/ztree/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="../../plugins/ztree/jquery.ztree.excheck.min.js"></script>

<script>
	$(function(){
		
		$.post("../menu/getMenuJson",{"showButton":true},function(data){
			$.fn.zTree.init($("#treeDemo"), setting, data);
		});
		

	});
	var setting = {  
			check: {
				enable: true,
				chkboxType: {"Y":"p", "N":"ps"},
				chkStyle: "checkbox"
			},
			view: {
				dblClickExpand: false
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeClick: beforeClick,
				onCheck: onCheck
			},
			view: {
				selectedMulti: false
			}
		};  
	function beforeClick(treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		zTree.checkNode(treeNode, !treeNode.checked, null, true);
		return false;
	}
	
	Array.prototype.indexOf = function(val) {
		for (var i = 0; i < this.length; i++) {
		if (this[i] == val) return i;
		}
		return -1;
		};
		
		Array.prototype.remove = function(val) {
			var index = this.indexOf(val);
			if (index > -1) {
			this.splice(index, 1);
			}
			};
	
	function onCheck(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
		nodes = zTree.getCheckedNodes(true),
		v = "",
		n="",
		menuIds=[],
		btnIds=[];
		for (var i=0, l=nodes.length; i<l; i++) {
			v += nodes[i].id;
			n += nodes[i].name;
			if(nodes[i].name.indexOf('按钮')!=-1){
				btnIds.push(nodes[i].id+"_"+nodes[i].getParentNode().id);
				menuIds.remove(nodes[i].getParentNode().id);
			}
			else
				menuIds.push(nodes[i].id);
		}
		$("#menuIds").val(menuIds.join(","));
		$("#btnIds").val(btnIds.join(","));
	}
</script>